import React, { useState, useEffect } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { BackButton, ProductCard, LoadingSpinner, EmptyState } from '../../components';
import api from '../../../../shared/api';
import './index.css';

const ProductListPage: React.FC = () => {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const [products, setProducts] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  
  const categoryId = searchParams.get('categoryId');
  const categoryName = searchParams.get('categoryName') || '商品列表';

  // 加载商品列表
  useEffect(() => {
    const loadProducts = async () => {
      try {
        setLoading(true);
        
        if (categoryId) {
          // 根据分类ID获取商品
          const productsData = await api.product.getProductsByCategory(categoryId);
          setProducts(productsData);
        } else {
          // 获取所有商品
          const productsData = await api.product.getProducts();
          setProducts(productsData);
        }
        
      } catch (error) {
        console.error('加载商品列表失败:', error);
        setProducts([]);
      } finally {
        setLoading(false);
      }
    };

    loadProducts();
  }, [categoryId]);

  const handleBack = () => {
    navigate(-1);
  };

  const handleProductClick = (productId: string) => {
    navigate(`/mall/product/${productId}`);
  };

  const handleSearch = () => {
    navigate('/mall/search');
  };

  if (loading) {
    return (
      <div className="product-list-page">
        <div className="product-list-page__header">
          <BackButton onClick={handleBack} />
          <div className="product-list-page__title">{categoryName}</div>
          <div className="product-list-page__placeholder"></div>
        </div>
        <div className="product-list-page__loading">
          <LoadingSpinner />
        </div>
      </div>
    );
  }

  return (
    <div className="product-list-page">
      {/* 头部 */}
      <div className="product-list-page__header">
        <BackButton onClick={handleBack} />
        <div className="product-list-page__title">{categoryName}</div>
        <div className="product-list-page__actions" onClick={handleSearch}>
          <span>🔍</span>
        </div>
      </div>

      {/* 商品列表 */}
      <div className="product-list-page__content">
        {products.length === 0 ? (
          <EmptyState
            title="暂无商品"
            description={categoryId ? "该分类下暂时没有商品" : "暂时没有商品"}
            icon="📦"
          />
        ) : (
          <>
            <div className="product-list-page__info">
              共找到 {products.length} 个商品
            </div>
            <div className="product-list-page__grid">
              {products.map((product) => (
                <ProductCard
                  key={product.id}
                  {...product}
                  onProductClick={handleProductClick}
                />
              ))}
            </div>
          </>
        )}
      </div>
    </div>
  );
};

export default ProductListPage; 